<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-steps
            :active="active"
            finish-status="success"
            align-center
            :space="200"
            style="padding-top: 50px; padding-left: 40px"
          >
            <el-step title="基础信息"></el-step>
            <el-step title="默认薪资规则"></el-step>
            <el-step title="考勤规则"></el-step>
            <el-step title="计税规则"></el-step>
          </el-steps>
          <el-divider></el-divider>

          <!-- 第一页  -->
          <div class="kuai-one" v-if="active == 0">
            <el-form
              :model="salary"
              :rules="rules"
              ref="salary"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="方案名称" prop="name">
                <el-input
                  v-model="salary.schemeName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <br />
              <el-form-item label="薪资周期" prop="region">
                <el-select v-model="salary.salaryCycle" style="width: 190px">
                  <el-option label="上上月" value="1"></el-option>
                  <el-option label="上月" value="2"></el-option>
                  <el-option label="本月" value="3"></el-option>
                  <el-option label="下月" value="4"></el-option>
                  <el-option label="下下月" value="5"></el-option>
                </el-select>
                &nbsp;&nbsp;
                <el-select v-model="salary.salaryDays" style="width: 190px">
                  <el-option
                    :label="index + 1"
                    :value="index + 1"
                    v-for="(a, index) in 31"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <br />
              <el-form-item label="税款周期" prop="region">
                <el-select v-model="salary.taxPeriod" style="width: 190px">
                  <el-option label="上上月" value="1"></el-option>
                  <el-option label="上月" value="2"></el-option>
                  <el-option label="本月" value="3"></el-option>
                  <el-option label="下月" value="4"></el-option>
                  <el-option label="下下月" value="5"></el-option>
                </el-select>
              </el-form-item>
              <br />
              <el-form-item label="选择人员">
                <el-select
                  v-model="salary.deptId"
                  placeholder="请选择"
                  style="width: 400px"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <!-- 第二页 -->
          <div v-if="active == 1">
            <el-button
              style="margin-top: 10px; margin-left: 40px"
              @click="dialogFormVisible = true"
              type="primary"
              >新建分类</el-button
            >
            <el-dialog
              title="设置薪资项名称"
              :visible.sync="dialogFormVisible"
              width="30%"
            >
              <el-form :rules="salary">
                <el-form-item
                  label="名称"
                  :label-width="formLabelWidth"
                  prop="formName"
                >
                  <el-input v-model="formName" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
            <br /><br />
            <div class="kuang"></div>
            <span style="padding-left: 40px">人事信息</span>
            <div class="xian"></div>
            <div style="padding-top: 20px; padding-left: 40px">
              <el-table :data="PersonnelInformation" border style="width: 100%">
                <el-table-column
                  prop="payroll"
                  label="薪资项"
                  width="250"
                ></el-table-column>
                <el-table-column
                  prop="rules"
                  label="规则"
                  width="350"
                ></el-table-column>
                <el-table-column prop="data" label="数据来源" width="250">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="230">
                </el-table-column>
                <!-- <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                      <el-button
                                      @click="insert(scope.$index, scope.row)"
                                      type="text" >
                                      添加一条
                                      </el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column> -->
              </el-table>
            </div>
            <br /><br />
            <div class="kuang"></div>
            <span style="padding-left: 40px">基本薪酬</span>
            <div class="xian"></div>
            <div style="padding-top: 20px; padding-left: 40px">
              <el-table :data="BaseSalary" border style="width: 99%">
                <el-table-column
                  prop="payroll"
                  label="薪资项"
                  width="250"
                ></el-table-column>
                <el-table-column
                  prop="rules"
                  label="规则"
                  width="350"
                ></el-table-column>
                <el-table-column prop="data" label="数据来源" width="250">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="230">
                </el-table-column>
                <!-- <el-table-column
                        fixed="right"
                        label="操作"
                        width="150"
                        >
                        <template slot-scope="scope">
                            <el-button
                            @click.native.prevent="handleEdit(scope.$index, scope.row)"
                            type="text" >
                            设置
                            </el-button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <el-dropdown>
                                <el-button type="text" icon="el-icon-more" size="small"></el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>生成台账</el-dropdown-item>
                                    <el-dropdown-item>修改</el-dropdown-item>
                                    <el-dropdown-item>撤销</el-dropdown-item>
                                    <el-dropdown-item>停用</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column> -->
              </el-table>
            </div>
            <br /><br />
            <div class="kuang"></div>
            <span style="padding-left: 40px">补贴</span>
            <div class="xian"></div>
            <div style="padding-top: 20px; padding-left: 40px">
              <el-table :data="tableData" border style="width: 99%">
                <el-table-column
                  prop="date"
                  label="薪资项"
                  width="250"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="规则"
                  width="350"
                ></el-table-column>
                <el-table-column prop="address" label="数据来源" width="250">
                </el-table-column>
                <el-table-column prop="address" label="类型" width="230">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="
                        handleEdit(scope.$index, scope.row)
                      "
                      type="text"
                    >
                      设置 </el-button
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-dropdown>
                      <el-button
                        type="text"
                        icon="el-icon-more"
                        size="small"
                      ></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>生成台账</el-dropdown-item>
                        <el-dropdown-item>修改</el-dropdown-item>
                        <el-dropdown-item>撤销</el-dropdown-item>
                        <el-dropdown-item>停用</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <br /><br />
            <div class="kuang"></div>
            <span style="padding-left: 40px">薪酬结果</span>
            <div class="xian"></div>
            <div style="padding-top: 20px; padding-left: 40px">
              <el-table :data="tableData" border style="width: 99%">
                <el-table-column
                  prop="date"
                  label="薪资项"
                  width="250"
                ></el-table-column>
                <el-table-column
                  prop="name"
                  label="规则"
                  width="350"
                ></el-table-column>
                <el-table-column prop="address" label="数据来源" width="250">
                </el-table-column>
                <el-table-column prop="address" label="类型" width="230">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="
                        handleEdit(scope.$index, scope.row)
                      "
                      type="text"
                    >
                      设置 </el-button
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-dropdown>
                      <el-button
                        type="text"
                        icon="el-icon-more"
                        size="small"
                      ></el-button>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>生成台账</el-dropdown-item>
                        <el-dropdown-item>修改</el-dropdown-item>
                        <el-dropdown-item>撤销</el-dropdown-item>
                        <el-dropdown-item>停用</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <!-- 第三页 -->
          <div v-if="active == 2">
            <div class="kuang"></div>
            <span style="padding-left: 40px">标准计薪天数</span>
            <div class="xian"></div>
            <br />
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="计薪时长"
                prop="xinNum"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-select v-model="ruleForm.xinNum" style="width: 320px">
                  <el-option label="月应出勤天数折算" value="1"></el-option>
                  <el-option
                    label="月应出勤天数折算+法定节假日折算"
                    value="2"
                  ></el-option>
                  <el-option label="自定义" value="3"></el-option>
                </el-select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-input
                  v-model="ruleForm.xinTian"
                  style="width: 70px"
                ></el-input
                >天/月 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月应出勤天数
                ×<el-input
                  v-model="ruleForm.xinShi"
                  style="width: 70px"
                ></el-input
                >小时/天
              </el-form-item>
              <el-form-item
                label="入/离职规则"
                prop="resource"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-radio-group v-model="ruleForm.resource">
                  <el-radio
                    label="按调薪后的工资计算（按照转正或调薪后的工资计算）"
                    style="padding-top: 10px"
                  ></el-radio>
                  <br />
                  <el-radio
                    label="按调薪前的工资计算（按照转正或调薪前的工资计算）"
                    style="padding-top: 30px"
                  ></el-radio>
                  <br />
                  <el-radio
                    label="混合计算（生效日期前按照转正或调薪前的工资计算，生效日期后按照转正或调薪后的工资计算）"
                    style="padding-top: 30px"
                  ></el-radio>
                </el-radio-group>
              </el-form-item>
              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">旷工扣款规则</span>
              <div class="xian"></div>
              <el-form-item
                label="计薪规则"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-radio-group v-model="ruleForm.a">
                  <el-radio label="固定奇数"></el-radio>
                  <el-radio label="引用变量"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="扣款比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>

              <el-form-item
                label="计薪基数"
                style="padding-top: 10px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.ji"
                  style="width: 350px"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="人性化设置"
                style="padding-top: -20px; padding-left: 40px"
              >
                每月累计旷工不超过
                <el-input v-model="ruleForm.bbb" style="width: 180px"></el-input
                >小时，不扣款
              </el-form-item>

              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">加班工资规则</span>
              <div class="xian"></div>
              <el-form-item
                label="计薪规则"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-radio-group v-model="ruleForm.a">
                  <el-radio label="固定奇数"></el-radio>
                  <el-radio label="引用变量"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="加班基数比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>

              <el-form-item
                label="计薪基数"
                style="padding-top: 10px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.ji"
                  style="width: 350px"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="工作日比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>
              <el-form-item
                label="休息日比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>
              <el-form-item
                label="节假日比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>
              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">病假扣款规则</span>
              <div class="xian"></div>
              <el-form-item
                label="计薪规则"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-radio-group v-model="ruleForm.a">
                  <el-radio label="固定奇数"></el-radio>
                  <el-radio label="引用变量"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="扣款比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>

              <el-form-item
                label="计薪基数"
                style="padding-top: 10px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.ji"
                  style="width: 350px"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="人性化设置"
                style="padding-top: -20px; padding-left: 40px"
              >
                每月累计病假不超过
                <el-input v-model="ruleForm.bbb" style="width: 180px"></el-input
                >小时，不扣款
              </el-form-item>
              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">事假扣款规则</span>
              <div class="xian"></div>
              <el-form-item
                label="计薪规则"
                style="padding-top: 20px; padding-left: 40px"
              >
                <el-radio-group v-model="ruleForm.a">
                  <el-radio label="固定奇数"></el-radio>
                  <el-radio label="引用变量"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="扣款比例"
                style="padding-top: -20px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.bili"
                  style="width: 180px"
                ></el-input
                >%
              </el-form-item>

              <el-form-item
                label="计薪基数"
                style="padding-top: 10px; padding-left: 40px"
              >
                <el-input
                  v-model="ruleForm.ji"
                  style="width: 350px"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="人性化设置"
                style="padding-top: -20px; padding-left: 40px"
              >
                每月累计事假不超过
                <el-input v-model="ruleForm.bbb" style="width: 180px"></el-input
                >小时，不扣款
              </el-form-item>

              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">迟到早退扣款规则</span>
              <div class="xian"></div>
              <div
                style="
                  padding-top: 30px;
                  padding-left: 70px;
                  color: #909399;
                  font-size: 14px;
                "
              >
                扣款方式 &nbsp;&nbsp;&nbsp;
                <el-button
                  type="primary"
                  plain
                  autofocus="true"
                  size="small"
                  @click="getMethod"
                  >迟到时长</el-button
                >
                <el-button type="primary" plain size="small" @click="getType"
                  >迟到次数</el-button
                >
              </div>
              <div
                style="
                  padding-top: 30px;
                  padding-left: 40px;
                  color: #909399;
                  font-size: 14px;
                "
              >
                迟到扣款规则 &nbsp;&nbsp;&nbsp;
                {{ ruleForm.method }}
              </div>

              <br /><br />
              <div class="kuang"></div>
              <span style="padding-left: 40px">全勤奖规则</span>
              <div class="xian"></div>
              <br />
              <div
                style="
                  padding-left: 70px;
                  color: #909399;
                  font-size: 14px;
                  display: inline;
                "
              >
                发放规则 &nbsp;&nbsp;&nbsp;
              </div>
              <span style="font-size: 14px">满足以下条件可享受全勤奖</span
              ><br /><br />
              <el-form-item label="员工状态" style="padding-left: 120px">
                <el-checkbox-group v-model="ruleForm.status">
                  <el-checkbox label="试用期员工" name="type"></el-checkbox>
                  <el-checkbox label="正式员工" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                label="工作性质"
                style="padding-left: 120px; position: relative; top: -15px"
              >
                <el-checkbox-group v-model="ruleForm.status">
                  <el-checkbox label="全职" name="type"></el-checkbox>
                  <el-checkbox label="兼职" name="type"></el-checkbox>
                  <el-checkbox label="实习生" name="type"></el-checkbox>
                  <el-checkbox label="劳务派遣" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div
                style="
                  padding-left: 70px;
                  color: #909399;
                  font-size: 14px;
                  display: inline;
                "
              >
                扣款规则 &nbsp;&nbsp;&nbsp;
              </div>
              <span style="font-size: 14px">满足以下任意条件，扣发全勤奖</span
              ><br /><br />
              <el-form-item label="员工状态" style="padding-left: 120px">
                <el-checkbox-group v-model="ruleForm.status">
                  <el-checkbox label="迟到早退" name="type"></el-checkbox>
                  <el-checkbox label="缺勤" name="type"></el-checkbox>
                  <el-checkbox label="年假" name="type"></el-checkbox>
                  <el-checkbox label="调休" name="type"></el-checkbox>
                  <el-checkbox label="事假" name="type"></el-checkbox>
                  <el-checkbox label="产假" name="type"></el-checkbox>
                  <br />
                  <el-checkbox label="育儿假" name="type"></el-checkbox>
                  <el-checkbox label="陪产假" name="type"></el-checkbox>
                  <el-checkbox label="病假" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
          <!-- 第四页 -->
          <div class="kuai_three" v-if="active == 3">
            <el-form :model="ruleForm" label-width="80px">
              <el-form-item label="全职计税">
                <el-radio-group v-model="ruleForm.bbb">
                  <el-radio label="工资所得"></el-radio>
                  <el-radio label="劳务报酬所得"></el-radio>
                  <el-radio label="不计税"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="兼职计税"
                style="position: relative; top: -62px; left: 500px"
              >
                <el-radio-group v-model="ruleForm.aaa">
                  <el-radio label="工资所得"></el-radio>
                  <el-radio label="劳务报酬所得"></el-radio>
                  <el-radio label="不计税"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="实习计税"
                style="position: relative; top: -62px"
              >
                <el-radio-group v-model="ruleForm.bbb">
                  <el-radio label="工资所得"></el-radio>
                  <el-radio label="劳务报酬所得"></el-radio>
                  <el-radio label="不计税"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="劳务派遣"
                style="position: relative; top: -122px; left: 500px"
              >
                <el-radio-group v-model="ruleForm.aaa">
                  <el-radio label="工资所得"></el-radio>
                  <el-radio label="劳务报酬所得"></el-radio>
                  <el-radio label="不计税"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="外包计税"
                style="position: relative; top: -122px"
              >
                <el-radio-group v-model="ruleForm.bbb">
                  <el-radio label="工资所得"></el-radio>
                  <el-radio label="劳务报酬所得"></el-radio>
                  <el-radio label="不计税"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
          <div style="margin-left: 1000px">
            <el-button style="margin-top: 12px" @click="fan" v-if="active == 0"
              >取消</el-button
            >
            <el-button style="margin-top: 12px" @click="tui" v-if="active != 0"
              >上一步</el-button
            >
            <el-button
              style="margin-top: 12px"
              @click="next"
              v-if="active != 3"
              type="primary"
              >下一步</el-button
            >
            <el-button
              style="margin-top: 12px"
              @click="getSubmit"
              v-if="active == 3"
              type="primary"
              >提交</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      salary: {
        id: undefined,
        // 方案名称
        schemeName: "",
        //  薪资周期 1:上上月 2:上月 3:本月 4:下月 5:下下月
        salaryCycle: "1",
        // 薪资周期的某一天  范围在 xxxx年x月01日至30日
        salaryDays: "1",
        // 税款周期 1:上上月 2:上月 3:本月 4:下月 5:下下月
        taxPeriod: 3,
        // 选择部门
        deptId: undefined,
        // 标准计薪规则
        standardPayrollRules: {
          // 计薪时长 1:月应出勤天数折算 2:月应出勤天数折算+法定假日折算 3:自定义
          durationOfPayroll: 1,
          // 设置每月出勤天数
          customizeDay: 1,
          // 每日出勤小时数
          attendanceHours: 1,
          // 入/离职规则   1:按调薪后的工资计算（按照转正或调薪后的工资计算 2:按调薪前的工资计算（按照转正或调薪前的工资计算） 3:混合计算（生效日期前按照转正或调薪前的工资计算，生效日期后按照转正或调薪后的工资计算）
          rules: 1,
        },
        // 病假扣款规则
        sickLeaveRules: {
          // 计薪规则 1:固定基数 2:引用变量
          sickPayrollRules: 1,
          // 扣除百分比
          sickDeductionPercentage: 0,
          // 计薪基数  选择固定基数按照 基本工资来计算
          sickSalaryBase: "",
          // 人性化设置
          sickFriendlySettings: 1,
        },
        // 全勤奖发放规则表
        rulesForTheDistributionOfAttendanceAwards: {
          // 员工状态 1:试用期 2:正式期 3:已离职
          employeeStatus: 1,
          // 岗位性质 0:全职 1:兼职 2:实习生 3:劳务派遣
          postType: 0,
        },
        // 事假请假规则
        personalLeaveRules: {
          // 计薪规则 1:固定基数 2:引用变量
          personalPayrollRules: 1,
          // 扣除百分比
          personalDeductionPercentage: 1,
          // 计薪基数  选择固定基数按照 基本工资来计算
          personalSalaryBase: "",
          // 人性化设置
          personalFriendlySettings: 1,
        },
        // 旷工扣款规则表
        absenteeismDeductionRules: {
          // 计薪规则 1:固定基数 2:引用变量
          absenteeismPayrollRules: 1,
          // 扣除百分比
          absenteeismDeductionPercentage: 1,
          // 计薪基数  选择固定基数按照 基本工资来计算
          absenteeismSalaryBase: "",
          // 人性化设置
          absenteeismFriendlySettings: 1,
        },
        // 加班规则
        overtimeRules: {
          // 计薪规则 1:固定基数 2:引用变量
          payrollRules: 1,
          // 加班基数比例 按百分比来计算
          overtimeBase: 1,
          // 计薪基数 如果选择固定基数按照基本工资计算
          salaryBase: 1,
          // 工作日比例 按照百分比来
          proportionO_workingDays: 1,
          // 休息日比例
          proportionOfDaysOff: 1,
          // 节假日比例
          proportionOfHolidays: 1,
        },
        // 迟到早退规则
        lateArrivalRules: {
          // 扣款方式 1:迟到时长 2:迟到次数
          deductionMethod: 1,
        },
        // 迟到扣款规则
        lateChargeRules: {
          //  区间 如果扣款方式选择选择迟到时长 单位 为小时  如果扣款方式选择选择迟到次数 单位 为次数
          lateInterval: 1,
          // 扣款规则 1:扣款 2:旷工
          lateDeductionRules: 1,
          // 扣款规则选择 扣款 单位为元 旷工为小时
          lateUnit: 1,
        },
        // 早退扣款规则表
        earlyRefundDeductionRules: {
          //  区间 如果扣款方式选择选择迟到时长 单位 为小时  如果扣款方式选择选择迟到次数 单位 为次数
          earlyInterval: 1,
          // 扣款规则 1:扣款 2:旷工
          earlyDeductionRules: 1,
          // 扣款规则选择 扣款 单位为元 旷工为小时
          earlyUnit: 1,
        },
      },
      ruleForm: {
        name: "",
        region: "3",
        num: "1",
        desc: "",
        xinNum: "3",
        xinTian: "21",
        xinShi: "8",
        resource: "",
        bili: "100",
        bbb: "5",
        method: "分钟", // 扣款方式
        status: [],
      },
      options: [
        {
          value: "1",
          label: "黄金糕",
        },
        {
          value: "2",
          label: "双皮奶",
        },
        {
          value: "3",
          label: "蚵仔煎",
        },
        {
          value: "4",
          label: "龙须面",
        },
        {
          value: "5",
          label: "北京烤鸭",
        },
      ],
      dialogFormVisible: false,
      formLabelWidth: "60px", // 新建分类弹框 设置输入框居中
      formName: "",
      // 人事信息
      PersonnelInformation: [
        {
          payroll: "姓名",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "所属部门",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "证件类型",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "证件号",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "手机号",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "入职日期",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "转正日期",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
        {
          payroll: "发薪日期表",
          rules: "取自“员工档案”数据",
          data: "员工档案",
          type: "统计项",
        },
      ],
      // 基本薪酬
      BaseSalary: [
        {
          payroll: "基本工资",
          rules: "取自“员工薪酬档案”数据",
          data: "员工薪酬档案",
          type: "税前加项",
        },
        {
          payroll: "调薪调整",
          rules: "-",
          data: "自定义公式",
          type: "税前加项",
        },
        {
          payroll: "在职计薪天数",
          rules: "根据员工考勤计算",
          data: "员工档案",
          type: "其他项",
        },
        {
          payroll: "入职离职调整",
          rules: "根据入职离职日期计算",
          data: "员工花名册",
          type: "其他项",
        },
      ],
      // 补贴
      Subsidy: [],
      rules: {
        name: [
          { required: true, message: "请输入方案名称", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
        region: [
          { required: true, message: "请选择薪资周期", trigger: "change" },
        ],
        xinNum: [
          { required: true, message: "请选择计薪时长", trigger: "change" },
        ],
        resource: [
          { required: true, message: "请选择入/离职日期", trigger: "change" },
        ],
        formName: [
          { required: true, message: "请输入薪资项名称", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      active: 0, //进度条默认打开第一页
    };
  },
  created() {},
  methods: {
    fan() {
      this.$router.push("/SalaryCalculate"); //返回
    },
    getType() {
      this.ruleForm.method = "次数"; // 扣款方式
    },
    getMethod() {
      this.ruleForm.method = "分钟"; // 扣款方式
    },
    //上一步
    tui() {
      if (this.active > 0) {
        this.active--;
      }
    },
    // 下一步
    next() {
      if (this.active < 3) {
        this.active++;
      }
    },
    //提交
    getSubmit() {},
  },
  insert(index, row) {},
};
</script>

<style scoped>
.kuai-one {
  width: 500px;
  height: 300px;
  /* border: 1px solid red; */
  margin-left: 100px;
  margin-top: 40px;
}
.kuai_three {
  width: 1200px;
  height: 400px;
  /* border: 1px solid red; */
  margin-left: 100px;
  margin-top: 40px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: white;
  height: 3300px;
}

.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.kuang {
  width: 4.5px;
  height: 25px;
  background-color: #409eff;
  margin-left: 30px;
  position: relative;
  top: 23px;
}
.xian {
  width: 1350px;
  height: 1px;
  background-color: #ebeef5;
  margin-left: 40px;
  margin-top: 18px;
}
</style>